<script setup lang="ts">
import { ref, computed, onUnmounted } from 'vue'

import { getTime } from '@/utils/time'
import useUserStore from '@/store/modules/user'
import { useRoute, useRouter } from 'vue-router'
import { useScroll } from '@vueuse/core'
import { useCountDown } from '@/hooks/countDown'

let userStore = useUserStore()
let $route = useRoute()
let $router = useRouter()
// const {y} = useScroll(window)

const { formatTime, start } = useCountDown()
let timeRes = computed(() => {
  return '剩余' + formatTime.value + '秒'
})

start(10)
</script>
<template>
  <div id="cd">
    <el-card>
      <div class="box">
        <img :src="userStore.avatar" alt="" class="avatar" />
        <div class="footer">
          <h3 class="title">
            {{ getTime() }}好~,
            <span class="gradient">
              {{ userStore.username }}， {{ timeRes }}
            </span>
          </h3>
          <p class="subtitle">Vue-Admin</p>
        </div>
      </div>
    </el-card>
    <div class="bottom">
      <def-svg-icon name="welcome" width="600px" height="300px"></def-svg-icon>
    </div>
    <hr />
    <div style="font-size: 30px; font-weight: bold">Vue3黑马小兔鲜项目</div>
    <hr />
    <div>
      <el-button>test</el-button>
      <el-button>test2</el-button>
      <el-button>test3</el-button>
    </div>
    <!--  <div>{{$route}}  1234567</div>-->
    <!--  <div>{{$router}}  1234567</div>-->
    <div style="height: 500px; width: 100%"></div>

    <!-- 路由组件出口的位置 -->
    <router-view v-slot="{ Component }">
      <transition name="fade">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>
<style lang="scss" scoped>
.box {
  display: flex;
  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  .footer {
    margin-left: 20px;
    margin-top: 15px;
    .title {
      font-size: 35px;
      margin-bottom: 30px;
      font-weight: 900;
      .gradient {
        background: linear-gradient(to right, #001529, #001529, #ffffff);
        /* 渐变方向是从左到右，颜色从红色到绿色 */
        background-clip: text;
        -webkit-background-clip: text; /* 兼容WebKit浏览器（例如Chrome和Safari） */
        color: transparent;
        font-size: 24px;
        font-weight: bold;
      }
    }
    .subtitle {
      font-style: italic;
      color: #ccc;
      font-weight: 700;
    }
  }
}
.bottom {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>
